<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bgff p20">
                    <p>工程数量</p>
                    <div class="pcub mt10">
                        <i class="sl-icon sl-projectfeed fz40 c-main"></i>
                        <div class="ml20">
                            <p>共计</p>
                            <p>3</p>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bgff p20">
                    <p>在线设备</p>
                    <div class="pcub mt10">
                        <i class="sl-icon sl-wuxianshebei fz40 c-main"></i>
                        <div class="ml20">
                            <p>共计</p>
                            <p>80</p>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bgff p20">
                    <p>离线设备</p>
                    <div class="pcub mt10">
                        <i class="sl-icon sl-lixianshebei1 fz40 c-main"></i>
                        <div class="ml20">
                            <p>共计</p>
                            <p>0</p>
                        </div>
                    </div>
                </div>
            </el-col>
           
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
               <div class="bgff plr20 bb-e0e0e0 " style="height:200px;">
                    <h2 class="bb-e0e0e0 ptb10 c-main"><span>实时数据信息</span></h2>
                    <reporthot></reporthot> 
               </div>
               <div class="bgff pt20 plr20">
                   <h2 class="bb-e0e0e0 ptb10 c-main"><span>实时数据统计</span></h2>
                    <div>
                       <div id="myChart41" style="width: 100%;height: 300px"></div>
                   </div>
               </div>
            </el-col>
            <el-col :span="18">
               <div class="bgff">
                   <bmap :height="'650px'" :type="type"  :from_report_id="from_report_id"></bmap>
               </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import bmap from '@/components/bmap1.vue'
import reporthot from '@/components/reporthot.vue'
export default {
    props:['type','from_report_id'],
    components:{bmap,reporthot},
    name: "videoControl",
    data(){
        return{}
    },
    watch:{
        type(val){
            this.drawPie();
        }
    },
    mounted() {
        this.drawPie();
    },
    methods:{
        drawPie(){
            let myChart = this.$echarts.init(document.getElementById("myChart41"));
                myChart.setOption({
                title : {
                    text: '',
                    subtext: '实时采集比',
                    x:'center'
                },
                color:['#5CACEE','#8B2323'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['合格数','报警']
                },
                series : [
                    {
                        name: '设备状态',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%','60%'],
                        data:[
                            {value:parseInt(Math.random()*(1000-500+1)+500,10), name:'正常'},
                            {value:parseInt(Math.random()*(100-50+1)+50,10), name:'报警'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
            }
    }
};
</script>

<style lang="less">

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
 
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
